<template>
  <div id="app">
<div class="header">
  <van-nav-bar
      title="分销中心"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
  />
</div>


    <div class="user-info-section">
      <div class="user-info-card">
        <div class="avatar-container">
          <img src="https://pic.rmb.bdstatic.com/bjh/cms/231229/909c39acd31706548ce34c1f4a048934_1703819359.8877_707.jpeg" alt="Avatar" class="avatar">
        </div>
        <div class="user-details">
          <div class="username">Len</div>
          <div class="user-level">普通用户</div>
        </div>
      </div>
      <div class="stats-card">
        <div class="stat-item">
          <div class="stat-label">总收益</div>
          <div class="stat-value">0.00</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">待入账佣金</div>
          <div class="stat-value">0.00</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">我的消费</div>
          <div class="stat-value">0.00</div>
        </div>
      </div>
      <div class="notification-card">
        <div class="message">恭喜您成为分销商</div>
        <div class="time-label">刚刚</div>
      </div>
    </div>
    <div class="no-more-message">没有更多了</div>
    <div class="button-grid">
      <div class="button-item">
        <img src="https://pic.rmb.bdstatic.com/bjh/cms/231229/909c39acd31706548ce34c1f4a048934_1703819359.8877_707.jpeg" alt="MyTeam" class="button-icon">
        <div class="button-label">我的团队</div>
      </div>
      <div class="button-item">
        <img src="https://pic.rmb.bdstatic.com/bjh/cms/231229/909c39acd31706548ce34c1f4a048934_1703819359.8877_707.jpeg" alt="CommissionDetail" class="button-icon">
        <div class="button-label">佣金明细</div>
      </div>
      <div class="button-item">
        <img src="https://pic.rmb.bdstatic.com/bjh/cms/231229/909c39acd31706548ce34c1f4a048934_1703819359.8877_707.jpeg" alt="DistributionOrder" class="button-icon">
        <div class="button-label">分销订单</div>
      </div>
      <div class="button-item">
        <img src="https://pic.rmb.bdstatic.com/bjh/cms/231229/909c39acd31706548ce34c1f4a048934_1703819359.8877_707.jpeg" alt="PromoteProduct" class="button-icon">
        <div class="button-label">推广商品</div>
      </div>
      <div class="button-item">
        <img src="https://pic.rmb.bdstatic.com/bjh/cms/231229/909c39acd31706548ce34c1f4a048934_1703819359.8877_707.jpeg" alt="MyProfile" class="button-icon">
        <div class="button-label" @click="shenqing()">我的资料</div>
      </div>
      <div class="button-item">
        <img src="https://pic.rmb.bdstatic.com/bjh/cms/231229/909c39acd31706548ce34c1f4a048934_1703819359.8877_707.jpeg" alt="DistributionRanking" class="button-icon">
        <div class="button-label">分销排行</div>
      </div>
      <div class="button-item">
        <img src="https://pic.rmb.bdstatic.com/bjh/cms/231229/909c39acd31706548ce34c1f4a048934_1703819359.8877_707.jpeg" alt="Invitation Poster" class="button-icon">
        <div class="button-label">邀商海报</div>
      </div>
      <div class="button-item">
        <img src="https://pic.rmb.bdstatic.com/bjh/cms/231229/909c39acd31706548ce34c1f4a048934_1703819359.8877_707.jpeg" alt="Sharing Record" class="button-icon">
        <div class="button-label">分享记录</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    shenqing(){
      this.$router.push('/shenqing')
    },
    onClickLeft() {
      this.$router.push('/wode')
    }
}
};
</script>

<style scoped>
#app {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  //display: flex;
  //width: 100%;
  //justify-content: space-between;
  //padding: 10px;
  //border-bottom: 1px solid #ccc;
}
.time {
  font-size: 12px;
}
.title {
  font-size: 16px;
  font-weight: bold;
}
.detail-button {
            font-size: 14px;
            cursor: pointer;
          }
.user-info-section {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 width: 100%;
               }
.user-info-card {
                 display: flex;
                 align-items: center;
                 background-color: #6666ff;
                 width: 90%;
                 padding: 20px;
                 border-radius: 10px;
                 margin: 20px;
                 color: white;
               }
.avatar-container {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-right: 20px;
            overflow: hidden;
          }
.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-details {
          display: flex;
          flex-direction: column;
        }
.username {
  font-size: 24px;
  margin-bottom: 10px;
}
.user-level {
          font-size: 18px;
        }
.stats-card {
           display: flex;
           width: 90%;
           justify-content: space-around;
           margin: 20px;
         }
.stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
.stat-label {
          font-size: 14px;
          color: gray;
        }
.stat-value {
          font-size: 20px;
        }
.notification-card {
                  display: flex;
                  width: 90%;
                  justify-content: center;
                  margin: 20px;
                }
.message {
  font-size: 14px;
  margin-right: 10px;
}
.time-label {
          font-size: 12px;
          color: gray;
        }
.no-more-message {
               text-align: center;
               color: gray;
               margin-top: 20px;
             }
.button-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 20px;
            width: 90%;
            margin-top: 20px;
          }
.button-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #6666ff;
            color: white;
            padding: 20px;
            border-radius: 10px;
          }
.button-icon {
            width: 40px;
            height: 40px;
            margin-bottom: 10px;
          }
.button-label {
            font-size: 14px;
          }
</style>
